<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
    <title>专题详情</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <link rel="stylesheet" href="../css/app.previewimage.css" />
    <style>
    	.icon-fenxiang1 {
    		position: absolute;
    		right: 10px;
    		font-size: 14px;
    		color: #999;
    	}
    	.icon-fenxiang1:before {
    		font-size: 20px;
    	}
    	.thumbnail {
    		text-align: center;
    	}
    	.thumbnail img,
    	.topic-text img {
    		max-width: 100%;
    		max-height: 100%;
    	}
    	.btn-awesome ,
    	.btn-message {
    		padding-top: 10px;
    	}
    	.btn-awesome span,
    	.btn-message span {
    		position: absolute;
    		margin-top: -1px;
    	}
    	.btn-awesome[disabled],
    	.btn-awesome.disabled,
    	.btn-message[disabled],
    	.btn-message.disabled {
    		color: #CCCCCC !important;
    	}
    	
    	.pinglun {
    		padding-left: 15px;
    		border-top: 1px solid #DCDCDC;
    	}
    	.pinglun-list {
    		border-bottom: 1px solid #DCDCDC;
    		padding-top: 5px;
    	}
    	.pinglun-list time {
    		font-size: 12px;
    		padding: 0 15px;
    	}
    	.pinglun-btn {
    		padding-left: 15px;
    		padding-right: 15px;
    	}
		.xiu-submit {
			position: fixed;
			bottom: 0;
			width: 100%;
			box-shadow: -2px 0 2px #DCDCDC;
      z-index: 999;
		}
		.xiu-submit button {
			margin-top: 5px;
		    padding-top: 3px;
		    padding-bottom: 3px;
		    color: #fff;
		    background: #FC3A2E;
		    border-color: #CCCCCC;
		}
		.xiu-submit input[type=text] {
			padding-top: 0px;
			padding-bottom: 0px;
			padding-left: 5px;
			height: 30px;
			background: #F7F7F8;
		}
		.comments .comment {
			padding: 5px;
			border-bottom: 1px solid #DDDDDD;
		}
		.btn-awesome.fixed {
			position: fixed;
			top: 20px;
			right: 20px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #FFFFFF;
			border: 1px solid #EEEEEE;
			z-index: 9999;
			line-height: normal;
			text-align: center;
			padding-top: 7px;
		}
    </style>
</head>
<body>
	<!--商品 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view scroll-data" data-tpl="tpl-template">
				<div class="thumbnail">
					<img src="../image/big.png" />
				</div>
				<div class="white pad-h-md pad-v mui-text-center">
					<strong class="topic-title"></strong>
				</div>
				<div class="mui-row mui-hidden">
					<div class="mui-col-xs-12 topic-desc pad">
					</div>
				</div>
				
				<!--分享按钮 开始-->
				<div class="mui-row white">
					<div class="mui-col-xs-12 mui-text-right">
						&nbsp;<i class="iconfont icon-fenxiang1 mgn-h-md btn-share">分享</i>
					</div>
					<div class="mui-col-xs-12 pad-v"></div>
				</div>
				<!--分享按钮 结束-->
				
				<!--专题内容 开始-->
				<div class="pad-v-md"></div>
				<div class="mui-row">
					<div class="mui-col-xs-12 topic-text pad">
					</div>
				</div>
				<!--专题内容 结束-->
				
				<!--最底部按钮 开始-->
				<div class="pad-v bdr-b"></div>
				<div class="mui-row white">
					<div class="mui-col-xs-6 mui-text-center btn-awesome">
						<i class="icon iconfont icon-down x2"></i>&nbsp;&nbsp;&nbsp;&nbsp;<span></span>
					</div>
					<div class="mui-col-xs-6 mui-text-center btn-message">
						<i class="icon iconfont icon-pinglun x2"></i>&nbsp;&nbsp;&nbsp;&nbsp;<span></span>
					</div>
				</div>
				<!--最底部按钮 结束-->
				<div class="pad-v-sm"></div>
				<!--评论内容 开始-->
				<div class="comments white">
				</div>
				<div class="pad-v-lg"></div>
			</section>
		</div>
	</div>
	
	<div class="btn-awesome fixed">
		<i class="icon iconfont icon-down x2"></i>
	</div>
	
	<!--提交评论 开始-->
	<div class="white mui-row xiu-submit mui-text-center">
		<div class="mui-col-xs-9 pad-h-md pad-v-sm">
			<input class="no-mgn" type="text" name="message" placeholder="请输入评论内容"/>
		</div>
		<div class="mui-col-xs-3">
			<button class="no-bdr pad-v-sm btn-submit" disabled="disabled">提交</button>
		</div>
	</div>
	<!--提交评论 结束-->
	
	<!-- 评论数据模板 开始 -->
	<script type="text/template" id="tpl-template">
		{{each data as item}}
		<div class="mui-row comment">
			<div class="mui-col-xs-12">
				<a>{{item.nicname || item.username}}：</a>
				<label>{{item.content}}</label>
			</div>
			<div class="mui-col-xs-12 mui-text-right">
				<time class="text-gray mgn-b-sm">{{item.create_time}}</time>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 评论数据模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
  <script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="../js/mui.zoom.js" ></script>
	<script type="text/javascript" src="../js/mui.previewimage.js" ></script>
	<script type="text/javascript" src="topic.detail.scroll.js" ></script>
</body>
</html>